<template>
<div class="xpage-detail">
  <div class="farmland-card van-hairline--bottom">
    <div class="farmland-card__left">
      <img
        :src="
          state.data.fileUpload?.fileUrl
            ? 'https://fmzk.harvest-code.com/api' + state.data.fileUpload?.fileUrl
            : dfimage
        "
        alt=""
      />
    </div>
    <div class="farmland-card__right">
      <div class="farmland-card__right__title">
        {{ state.data.plantingPlans?.canopies?.canopyName }}
      </div>
      <div class="farmland-card__right__text">
        <!-- {{ state.data.plantingPlans?.cultivars?.name }}
        {{ state.data.plantingPlans?.crops?.name }}({{ state.data.plantingPlans?.standardName }}) -->
        {{ state.data.plantingPlans?.standardName }}
      </div>
      <div class="farmland-card__right__desc">
        定植日期：{{ state.data.plantingPlans?.plantingTime }}
      </div>
    </div>
  </div>

  <div class="xblock-list">
    <div class="xblock-cell van-hairline--bottom">
      <div class="xblock-cell__title">
        <div>气象数据</div>
        <div class="xblock-cell__time">
          {{
            (state.data.swqxDeviceKeysList && state.data.swqxDeviceKeysList[0]?.updateDate) ||
            '----'
          }}
        </div>
      </div>
    </div>
    <div
      class="xblock-content xblock-content__cell"
      v-if="state.data.swqxDeviceKeysList && state.data.swqxDeviceKeysList?.length > 0"
    >
      <block v-for="itemchild in state.data.swqxDeviceKeysList">
        <p v-if="itemchild.type.indexOf('soil') == -1">
          <span>{{ itemchild.name }}：</span
          ><span>{{ itemchild.deviceRealData.data }}{{ itemchild.unit }}</span>
        </p>
      </block>
    </div>
   </div>
   <div class="xblock-list">
    <div class="xblock-cell van-hairline--bottom van-hairline--top">
      <div class="xblock-cell__title">
        <div>土壤数据</div>
        <div class="xblock-cell__time">
          {{
            (state.data.trsqDeviceKeysList && state.data.trsqDeviceKeysList[0]?.updateDate) ||
            '----'
          }}
        </div>
      </div>
    </div>
    <div
      class="xblock-content xblock-content__cell"
      v-if="state.data.trsqDeviceKeysList && state.data.trsqDeviceKeysList?.length > 0"
    >
      <block v-for="itemchild in state.data.trsqDeviceKeysList">
        <p v-if="itemchild.type.indexOf('soil') >= 0">
          <span>{{ itemchild.name }}：</span
          ><span>{{ itemchild.deviceRealData.data }}{{ itemchild.unit }}</span>
        </p>
      </block>
    </div>
  </div>

  <div class="xblock-list">
    <div class="xblock-cell van-hairline--bottom">
      <div class="xblock-cell__title">
        <div>视频监控</div>
      </div>
    </div>
    <div class="xblock-content">
      <video
        id="itemid"
        :src="state.data.canopyVideoStreamList && state.data.canopyVideoStreamList[0]?.link"
        initial-time="0"
        :controls="true"
        :autoplay="false"
        :loop="false"
        :muted="false"
      />
    </div>
  </div>

  <div class="xblock-list">
    <div class="xblock-cell van-hairline--bottom">
      <div class="xblock-cell__title">
        <div>虫情测报</div>
        <div class="xblock-cell__time">
          {{
            (state.data.cqcbDeviceKeysList && state.data.cqcbDeviceKeysList[0]?.updateDate) ||
            '----'
          }}
        </div>
      </div>
    </div>
    <div
      class="xblock-content xblock-content__cell"
      v-if="state.data.cqcbDeviceKeysList && state.data.cqcbDeviceKeysList?.length > 0"
    >
      <block v-for="itemchild in state.data.cqcbDeviceKeysList">
        <p>
          <span>{{ itemchild.name }}：</span
          ><span>{{ itemchild.deviceRealData.data }}{{ itemchild.unit }}</span>
        </p>
      </block>
    </div>
  </div>

  <div class="xblock-list">
    <div class="xblock-cell van-hairline--bottom">
      <div class="xblock-cell__title">
        <div>电磁阀监测</div>
        <div class="xblock-cell__time">
          {{
            (state.data.wxfkDeviceKeysList && state.data.wxfkDeviceKeysList[0]?.updateDate) ||
            '----'
          }}
        </div>
      </div>
    </div>
    <div
      class="xblock-content xblock-content__cell"
      v-if="state.data.wxfkDeviceKeysList && state.data.wxfkDeviceKeysList?.length > 0"
    >
      <p v-for="itemchild in state.data.wxfkDeviceKeysList" :key="itemchild.id">
        <span>{{ itemchild.devices.name }}：</span>
        <span :class="getClass(itemchild.deviceRealData?.data)">{{
          getName(itemchild.deviceRealData.data)
        }}</span>
      </p>
      <p class="xblock-content__bottom">
        <nut-button
            plain
            size="mini"
            shape="round"
            type="primary"
            @click="clickValve('operation', state.data.wxfkDeviceKeysList)"
            >去控制</nut-button
        >
      </p>
    </div>
  </div>
</div>
</template>

<script lang="ts" setup>
import Taro from '@tarojs/taro'
import { usePullDownRefresh } from '@/hooks/life'
import { ref, onMounted, reactive } from 'vue'
import { useLoad, useDidShow } from '@tarojs/taro'
import { canopiesInfo } from '@/services/apis/canopies'
const dfimage = require('@/assets/icons/dfimage.png')

const item = ref({
  imgUrl:
    '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg',
  title: '农田1号',
  desc: '草莓（圣诞红）越冬茬',
  time: '2021-08-16'
})

const state = reactive({
  source: {
    src: 'https://open.ys7.com/v3/openlive/G17518106_1_1.m3u8?expire=1675388297&id=411093370918731776&t=8a91293e93bd6be16cdb5605769b57a03ff5d9d78b19af9c695d8cbadb466a53&ev=100'
  },
  options: {
    controls: true
  },
  id: '',
  data: {}
})
const play = elm => {
  console.log('play', elm)
}
const pause = elm => {
  console.log('pause', elm)
}
const playend = elm => {
  console.log('playend', elm)
}

const clickValve = (type, item) => {
  Taro.setStorageSync('wxfkDeviceKeysList', item)
  Taro.navigateTo({
    url: `/pagesSub/valve/${type}/index?id=${state.data.plantingPlans?.canopyId || ''}&canopyName=${
      state.data.plantingPlans?.canopies?.canopyName || ''
    }`
  })
}

useLoad(option => {
  state.id = option.id
  console.log(option.id)
  canopiesInfo({ id: state.id }).then(data => {
    state.source.src = data.data.canopyVideoStreamList[0].link
    state.data = data.data
  })
})
useDidShow(() => {
  state.source.src = []
  state.data = {}
  canopiesInfo({ id: state.id }).then(data => {
    state.source.src = data.data.canopyVideoStreamList[0].link
    state.data = data.data
  })
})
const getName = type => {
  switch (type) {
    case '0':
      return '关闭'
      break
    case '1':
      return '打开'
      break
    case '2':
      return '活动中'
      break
    case '3':
      return '未安装'
      break
    case '4':
      return '暂停中'
      break
    case '5':
      return '阻止中'
      break
    case '6':
      return '回避'
      break
    default:
      return '关闭'
      break
  }
}
const getClass = type => {
  switch (type) {
    case '0':
      return 'yellow'
      break
    case '1':
      return 'green'
      break
    case '2':
      return ''
      break
    case '3':
      return ''
      break
    case '4':
      return ''
      break
    case '5':
      return 'red'
      break
    case '6':
      return ''
      break
    default:
      return ''
      break
  }
}
</script>

<style lang="scss">
@import '@/assets/styles/index.scss';
$border-radius: 6px;
$border-color: #eaeaea;
.farmland-card {
  padding: 10px 18px;
  display: flex;
  background: #fff;
  .xblock-content {
    font-size: $font-size-2;
  }
  .farmland-card__left {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    background-color: $card-left-background-color;
    border-radius: $border-radius;
    overflow: hidden;
    > img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  .farmland-card__right {
    flex: 1;
    padding: 0 0 0 16px;
    .farmland-card__right__title {
      @include multi-ellipsis(1);
      line-height: 1.5;
      font-size: $font-size-3;
      font-weight: 400;
    }
    .farmland-card__right__text{
      color: #333333;
      @include multi-ellipsis(2);
      padding: 3px 0 0 0;
      font-size: $font-size-1;
    }
    .farmland-card__right__desc {
      color: #666666;
      @include multi-ellipsis(2);
      padding: 3px 0 0 0;
      font-size: $font-size-0;
    }
  }
}
</style>
